import Vue from "vue";
import Connect from "./Connect.vue";

export default function registerSection(lf) {
  lf.register("section", ({ HtmlNode, HtmlNodeModel }) => {
    class ConnectNode extends HtmlNode {
      setHtml(rootEl) {
        const { properties } = this.props.model;
        const el = document.createElement("div");
        rootEl.innerHTML = "";
        rootEl.appendChild(el);
        const Profile = Vue.extend({
          render: function (h) {
            return h(Connect, {
              props: {
                name: properties.workSectionName,
              },
              // on: {
              //   'select-button': (type) => {
              //     console.log('select-button', type)
              //   }
              // }
            });
          },
        });
        new Profile().$mount(el);
      }
    }
    class ConnectNodeModel extends HtmlNodeModel {
      setAttributes() {
        this.menu = [
          {
            text: "删除",
            callback: (node) => {
              this.graphModel.deleteNode(node.id);
            },
          },
          {
            text: "复制",
            callback: (node) => {
              this.graphModel.cloneNode(node.id);
            },
          },
        ]
      }
      initNodeData(data) {
        data.text = {
          editable: false,
        };
        super.initNodeData(data);
        const width = 100;
        const height = 40;
        this.width = width;
        this.height = height;
        this.anchorsOffset = [
          [width / 2, 0],
          [0, height / 2],
          [-width / 2, 0],
          [0, -height / 2],
        ];
      }
    }
    return {
      type: "section",
      view: ConnectNode,
      model: ConnectNodeModel,
    };
  });
}
